﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Product.aspx.cs" Inherits="Wei8808Cms.WebSite.Product" %>

<%@ Register Src="UserControl/Nav.ascx" TagName="Nav" TagPrefix="uc1" %>
<%@ Register Src="UserControl/Header.ascx" TagName="Header" TagPrefix="uc2" %>
<%@ Register Src="UserControl/Footer.ascx" TagName="Footer" TagPrefix="uc3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    <link type="text/css" rel="stylesheet" href="css/media-queries.css" />
    <link type="text/css" rel="stylesheet" href="css/prettyPhoto.css" />
    <link type="text/css" rel="stylesheet" href="css/isotope.css" />
    <!--[if IE 7]><link type="text/css" rel="stylesheet" href="css/ie7.css"/><![endif]-->
    <!-- end CSS-->
    <script type="text/javascript" language="javascript" src="js/libs/modernizr-2.0.6.min.js"></script>
</head>
<body id="top" class="innerpage">
    <form id="form1" runat="server">
    <uc2:Header ID="Header1" runat="server" />
    <header id="main">

<div class="container">
<div class="header-meta">
    <uc1:Nav ID="Nav1" runat="server" />
  </div><!-- end of .header-meta -->
  </div>
  <!-- end of .container -->
  <div class="clearfix"></div>
  
<div class="motto-area">
      <div class="container">
          <h1>产品功能</h1>
      </div>
  </div>
</header>
    <!--! end of header -->
    <div class="clearfix">
    </div>
    <div class="container page">
        <div class="masonry-navigation">
            <%=DivNav%>
        </div>
        <div class="portfolio-area filterable">
            <%=PDetal %>
            <%--<%

                foreach (var info in ProductList)
                {
            %>
            <div class="full_column element <%=info.PId%>">
                <div class="portfolio-box">
                    <p>
                        <strong>
                            <%=info.ProductName %>——<%=info.ProductTitle %></strong>
                    </p>
                    <%=info.ProductContent %>
                </div>
            </div>
            <%
}    
            %>--%>
            <%--<div class="full_column element 1">
                <figure class="hover-effect main-image">
        <a href="img/800x600-dummy1.jpg" data-rel="prettyPhoto[mixed]">
        <img src="img/portfolio-1col-img.jpg" alt="Image description" title="Image title">
        </a>
    </figure>
                <div class="portfolio-box">
                    <p>
                        <strong>User Experience </strong>
                    </p>
                    <em>Webdesign</em> <a class="website" href="#">Website</a>
                </div>
            </div>
            <div class="full_column element 2">
                <div class="portfolio-box">
                    <p>
                        <strong>User Experience </strong>
                    </p>
                    <em>Webdesign</em>
                </div>
            </div>
            <div class="full_column element 3">
                <figure class="hover-effect main-image">
        <a href="img/800x600-dummy3.jpg" data-rel="prettyPhoto[mixed]">
        <img src="img/portfolio-1col-img-2.jpg" alt="Image description" title="Image title">
        </a>
    </figure>
                <div class="portfolio-box">
                    <p>
                        <strong>User Experience </strong>
                    </p>
                    <em>Webdesign</em> <a class="website" href="#">Website</a>
                </div>
            </div>--%>
        </div>
    </div>
    <div class="clearfix">
    </div>
    <div class="footer">
        <div class="toggle-features-holder">
            <p class="toggle-features">
                Show the theme features</p>
        </div>
        <div class="features-area">
            <div class="container">
                <div class="one_third">
                    <figure>
    	<img src="img/services-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Design</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third">
                    <figure>
    	<img src="img/services-1-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Slideshows</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third last">
                    <figure>
    	<img src="img/services-2-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Shortcodes</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third">
                    <figure>
    	<img src="img/services-3-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Powerfull</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third">
                    <figure>
    	<img src="img/services-4-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>SEO</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
                <div class="one_third last">
                    <figure>
    	<img src="img/services-5-icn.png" alt="Image description" title="Image title">
        </figure>
                    <div class="features-box">
                        <p>
                            <strong>Mobile</strong></p>
                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-module-top">
            <div class="footer-module-bottom">
                <div class="footer-module-middle">
                    <div class="container">
                        <div class="one_third widget">
                            <h3>
                                Text area</h3>
                            <div class="text-area">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar volutpat
                                    venenatis. Vestibulum molestie luctus rutrum. Maecenas gravida pretium justo, eget
                                    varius turpis pharetra vitae. Proin id elit sem, quis mattis leo. Mauris scelerisque,
                                    augue sit amet lobortis hendrerit, ipsum massa bibendum tortor. Read our <a href="#">
                                        privacy policy</a>.</p>
                            </div>
                            <ul class="follow-widget">
                                <li class="twitter"><a href="#">Twitter</a></li>
                                <li class="linkedin"><a href="#">Linkedin</a></li>
                                <li class="facebook"><a href="#">Facebook</a></li>
                                <li class="tumblr"><a href="#">Tumblr</a></li>
                                <li class="flickr"><a href="#">Flickr</a></li>
                            </ul>
                        </div>
                        <!-- end of .widget -->
                        <div class="one_third widget">
                            <h3>
                                Latest tweets</h3>
                            <div id="paging">
                                <div class="widget query">
                                </div>
                                <div class="controls">
                                    <button class="prev" type="button" disabled>
                                        &larr;</button>
                                    <span class="pagenum"></span>
                                    <button class="next" type="button" disabled>
                                        &rarr;</button>
                                </div>
                            </div>
                        </div>
                        <!-- end of .widget -->
                        <div class="one_third widget last">
                            <h3>
                                Latest blog post</h3>
                            <ul class="latest-post">
                                <li>
                                    <figure class="styled circle">
    	<a href="#">
        	<img class="left" src="img/blog-post-thumb.jpg" alt="Image description">
        </a>
        </figure>
                                    <div class="latest-popular-post-meta">
                                        <p class="title">
                                            Maecenas porta tellus eget</p>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet tristi senectus et netus</p>
                                        <p class="blog-date">
                                            2013 / 10 Comments</p>
                                    </div>
                                </li>
                                <!-- end of .blog-post -->
                                <li>
                                    <figure class="styled circle">
    	<a href="#">
        	<img class="left" src="img/blog-post-thumb-1.jpg" alt="Image description">
        </a>
        </figure>
                                    <div class="latest-popular-post-meta">
                                        <p class="title">
                                            Pellentesque habitant morbi</p>
                                        <p class="content">
                                            Lorem ipsum dolor sit amet tristi senectus et netus
                                        </p>
                                        <p class="blog-date">
                                            2013/ 10 Comments</p>
                                    </div>
                                </li>
                                <!-- end of .blog-post -->
                            </ul>
                        </div>
                        <!-- end of .widget -->
                    </div>
                </div>
            </div>
        </div>
        <div class="clearfix">
        </div>
        <uc3:Footer ID="Footer1" runat="server" />
        <!-- end of .footer-extra -->
    </div>
    <!-- end of footer -->
    <!-- JavaScript at the bottom for fast page loading -->
    <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">        window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
    <!-- scripts concatenated and minified via ant build script-->
    <script type="text/javascript" language="javascript" src="js/script.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.prettyPhoto.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.responsinav.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.tweet.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.isotope.min.js"></script>
    <!-- end scripts-->
    <script type="text/javascript" language="javascript">
        $(function () {

            $(window).responsinav({ breakpoint: 650 });

            /* ====== PrettyPhoto ====== */
            $("a[data-rel^='prettyPhoto']").prettyPhoto({ hook: 'data-rel' });
            $('a[data-rel]').each(function () {
                $(this).attr('rel', $(this).attr('data-rel')).removeAttr('data-rel');
            });

            /* ====== Tweet ====== */
            jQuery(function ($) {
                var options = {
                    username: "cssluxury",
                    page: 1,
                    avatar_size: 0,
                    count: 3,
                    loading_text: "loading ..."
                };

                var widget = $("#paging .widget"),
          next = $("#paging .next"),
          prev = $("#paging .prev");

                var enable = function (el, yes) {
                    yes ? $(el).removeAttr('disabled') :
                $(el).attr('disabled', true);
                };

                var stepClick = function (incr) {
                    return function () {
                        options.page = options.page + incr;
                        enable(this, false);
                        widget.tweet(options);
                    };
                };

                next.bind("checkstate", function () {
                    enable(this, widget.find("li").length == options.count)
                }).click(stepClick(1));

                prev.bind("checkstate", function () {
                    enable(this, options.page > 1)
                }).click(stepClick(-1));

                widget.tweet(options).bind("loaded", function () { next.add(prev).trigger("checkstate"); });
            });
        });
    </script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('.toggle-features-holder').click(function () {
                $('.features-area').animate({ opacity: 1.0 }, 200).slideToggle(function () {
                    $('p.toggle-features').text(
      $(this).is(':visible') ? "Hide the theme features" : "Show the theme features"
    );
                    $('.toggle-features-holder').toggleClass("closed");
                });
            });
        });
    </script>
    <script type="text/javascript" language="javascript">
        $(window).load(function () {

            //modified Isotope methods for gutters in masonry
            $.Isotope.prototype._getMasonryGutterColumns = function () {
                var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
                containerWidth = this.element.width();

                this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
                // or use the size of the first item
                  this.$filteredAtoms.outerWidth(true) ||
                // if there's no items, use size of container
                  containerWidth;

                this.masonry.columnWidth += gutter;

                this.masonry.cols = Math.floor((containerWidth + gutter) / this.masonry.columnWidth);
                this.masonry.cols = Math.max(this.masonry.cols, 1);
            };

            $.Isotope.prototype._masonryReset = function () {
                // layout-specific props
                this.masonry = {};
                // FIXME shouldn't have to call this again
                this._getMasonryGutterColumns();
                var i = this.masonry.cols;
                this.masonry.colYs = [];
                while (i--) {
                    this.masonry.colYs.push(0);
                }
            };

            $.Isotope.prototype._masonryResizeChanged = function () {
                var prevSegments = this.masonry.cols;
                // update cols/rows
                this._getMasonryGutterColumns();
                // return if updated cols/rows is not equal to previous
                return (this.masonry.cols !== prevSegments);
            };

            var $container = $('.portfolio-area'),
        filters = {};

            $container.isotope({
                itemSelector: '.full_column',
                resizable: false, // disable normal resizing
                masonry: {
                    columnWidth: $container.width() / 1,
                    gutterWidth: 0
                }
            });

            // update columnWidth on window resize
            $(window).smartresize(function () {
                $container.isotope({
                    // update columnWidth to a percentage of container width
                    masonry: { columnWidth: $container.width() / 1 }
                });
            });


            // filter buttons
            $('.filter a').click(function () {
                var $this = $(this);
                // don't proceed if already selected
                if ($this.hasClass('selected')) {
                    return;
                }

                var $optionSet = $this.parents('.option-set');
                // change selected class
                $optionSet.find('.selected').removeClass('selected');
                $this.addClass('selected');

                // store filter value in object
                // i.e. filters.color = 'red'
                var group = $optionSet.attr('data-filter-group');
                filters[group] = $this.attr('data-filter-value');
                // convert object into array
                var isoFilters = [];
                for (var prop in filters) {
                    isoFilters.push(filters[prop])
                }
                var selector = isoFilters.join('');
                $container.isotope({ filter: selector });

                return false;
            });

        });
  
    </script>
    <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
    <!--[if lt IE 7 ]>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
    </form>
</body>
</html>
